<template>
  <a-tag color="warning" style="padding: 5px 10px">当前版本号一定要大于已经上线的APP版本号，否则更新将会失败！！！</a-tag>
  <a-divider></a-divider>
  <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="App" name="value">
      <a-row>
        <a-col :span="12">
          <a-tag color="processing">护士端</a-tag>
        </a-col>
      </a-row>
    </a-form-item>

    <a-form-item label="操作系统" name="value">
      <a-row>
        <a-col :span="12">
          <a-select
            ref="select"
            v-model:value="form.portValue"
            @focus="focus"
            @change="handleChange"
            style="width: 200px"
            placeholder="请选择操作系统"
          >
            <a-select-option v-for="item in system" :value="item.name" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-form-item>

    <a-form-item label="版本号" name="value">
      <a-row>
        <a-col :span="10">
          <a-input placeholder="请输入版本号(当前版本号一定要大于线上的版本号！！！)"></a-input>
        </a-col>
      </a-row>
    </a-form-item>

    <a-form-item label="更新地址" name="value">
      <a-row>
        <a-col :span="12">
          <a-input placeholder="请输入更新地址"></a-input>
        </a-col>
      </a-row>
    </a-form-item>

    <a-form-item label="安装包地址" name="value">
      <a-row>
        <a-col :span="12">
          <a-input placeholder="请输入安装包地址"></a-input>
        </a-col>
      </a-row>
    </a-form-item>

    <a-form-item label="是否强制升级" name="value">
      <a-row>
        <a-col :span="12">
          <a-radio-group v-model:value="form.value" name="radioGroup">
            <a-radio value="1">是</a-radio>
            <a-radio value="2">否</a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </a-form-item>

    <a-form-item label="更新内容" name="value">
      <a-row>
        <a-col :span="12">
          <tinymce ref="editor" :value="form.value" @input="tinymceInput"></tinymce>
        </a-col>
      </a-row>
    </a-form-item>
  </a-form>
  <a-row>
    <a-col :span="4" :offset="8">
      <a-button type="primary" @click="save">保存</a-button>
    </a-col>
    <a-col :span="4" :offset="1">
      <a-button type="info" @click="back">返回</a-button>
    </a-col>
  </a-row>
</template>
<script>
import tinymce from '@/components/common/tinymce/tinymce'
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, watch, computed, defineComponent, createVNode } from 'vue'
export default {
  components: {
    tinymce
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const formRef = ref('')
    const form = reactive({
      inputValue: '',
      date: '',
      value: 0
    })
    // 表单验证
    const rules = {
      portValue: [{ required: true, message: '请选择端口!', trigger: 'change' }]
    }
    const system = reactive([
      {
        name: 'Android',
        id: 1
      },
      {
        name: 'IOS',
        id: 1
      }
    ])
    const tinymceInput = value => {
      console.log(value, '富文本内容')
      form.value = value
    }
    const back = () => {
      router.go(-1)
    }

    return {
      formRef,
      form,
      rules,
      system,
      tinymceInput,
      labelCol: { style: { fontWeight: 'bold', width: '100px' } },
      wrapperCol: { offset: 1 },
      back
    }
  }
}
</script>
